<template>
  <div class="role">
    <el-card class="card">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 角色信息与权限列表 -->
        <el-tabs v-model="activeName" type="card" class="text">
          <el-tab-pane label="角色信息" name="first">
            <el-table
            :data="list"
            stripe
            style="width: 100%;height:470px"
            height="470"
            v-loading="loading"
            >
              <el-table-column
              type="index"
              label=" "
              width="40"
              >
              </el-table-column>
              <el-table-column
              prop="name"
              label="角色"
              width="800"
              >
              </el-table-column>
              <el-table-column
              prop="editor"
              label="编辑"
              >
                <template slot-scope="scope">
                  <el-button
                  size="mini"
                  plain
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="editbtn(scope.row)"
                  >
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="权限信息" name="second">
            <el-table
            :data="menu"
            stripe
            style="width: 100%"
            height="470"
            >
              <el-table-column
              type="index"
              width="40"
              >
              </el-table-column>
              <el-table-column
              prop="remark"
              label="内容"
              >
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <!-- <div class="Conpager">
              <el-pagination
              class='stu-pager'
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNumber"
              :page-size="pageSize"
              :page-sizes="[8,10]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              >
            </el-pagination> -->
            <!-- </div> -->
          </el-tab-pane>
        </el-tabs>
        <!-- 角色细则编辑组件 -->
        <el-drawer
          title="编辑角色与权限关系"
          :visible.sync="dialog"
          direction="rtl"
          custom-class="demo-drawer"
          ref="drawer"
          >
           <div style="padding:0 10px">
               <el-form :model="menufrom">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                  <el-input
                  v-model="menufrom.name"
                  autocomplete="off"
                  disabled
                  style="width:200px"
                  >
                  </el-input>
                </el-form-item>
               </el-form>
              <div
                style="text-align:right;
                padding-bottom:10px"
                >
                  <el-link type="info" @click="unhavebtn()">查看未获得权限</el-link>
                  <el-link type="primary" @click="nowhavebtn()">查看当前权限</el-link>
              </div>
              <div v-show="nowhave">
                <div style="height:475px;width:100%">
                  <el-table
                  class="coll-div"
                  height="375"
                  ref="multipleTable"
                  :data="this.menufrom.list"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column
                      label="当前权限"
                      prop="remark">
                    </el-table-column>
                  </el-table>
                </div>
                <div class="demo-drawer__footer">
                  <el-button @click="dialog = false">取 消</el-button>
                  <el-button type="danger" @click="moveon()">移除</el-button>
                </div>
              </div>
              <div v-show="unhave">
                <div style="height:475px;width:100%">
                  <el-table
                  class="coll-div"
                  height="375"
                  ref="multipleTable"
                  :data="this.menufrom.noList"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column
                      label="未获得权限"
                      prop="remark">
                    </el-table-column>
                  </el-table>
                </div>
                <div class="demo-drawer__footer">
                  <el-button @click="dialog = false">取 消</el-button>
                  <el-button type="success" @click="addrole()">添加</el-button>
                </div>
              </div>
          </div>
        </el-drawer>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'role',
  data () {
    return {
      nowhave: true,
      unhave: false,
      pageNumber: 1,
      pageSize: 8,
      activeName: 'first',
      totalCount: -1,
      query: '',
      list: [],
      menu: [],
      menufrom: {
        list: [],
        noList: [],
        name: '',
        rid: ''
      },
      multipleSelection: [],
      tableData: [],
      detaillist: [],
      rid: '',
      name: '',
      dialogAddVisible: false,
      // form: {},
      checkList: [],
      formLabelWidth: '80px',
      dialog: false,
      loading: false
    }
  },
  mounted () {
    this.loading = true
  },
  components: {},
  created () {
    this.getRolelist()
    this.getMenuinfo()
  },
  methods: {
    // 获取角色信息
    async getRolelist () {
      const AUTH_TOKEN = sessionStorage.getItem('token')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      this.$http.defaults.headers.get['Content-Type'] = 'application/json'
      this.$http.defaults.headers.get['Accept'] = 'application/json'
      const res = await this.$http.get(`role/list?pageNum=1&pageSize=99999`)
      const {code, msg, page} = res.data
      // console.log(res)
      if (code === 200) {
        this.list = page.list
        this.loading = false
        // this.name = list.name
      } else {
        this.$message.error(msg)
        this.loading = false
      }
    },
    // 获取角色详细信息
    async getmenudetail () {
      const res = await this.$http.get(`role/info/${this.rid}`)
      const {code, msg, roleVo} = res.data
      // console.log(res)
      if (code === 200) {
        // this.rid = rid
        // this.name = name
        this.menufrom = roleVo
      } else {
        this.$message.error(msg)
      }
    },
    // 获取所有权限信息
    async getMenuinfo () {
      const res = await this.$http.get(`menu/list?pageNum=1&pageSize=999999`)
      const {code, msg, page} = res.data
      // console.log(res)
      if (code === 200) {
        this.menu = page.list
        this.totalCount = page.totalCount
      } else {
        this.$message.error(msg)
      }
    },
    // 编辑角色组件
    editbtn (info) {
      this.rid = info.rid
      // console.log(this.rid)
      if (this.rid === 1) {
        this.$message.error('用户没有修改权限！如需修改请联系管理员')
      } else {
        this.dialog = true
        this.getmenudetail()
      }
    },
    editinfo () {
      this.dialogEditorVisible = false
    },
    // 分页相关方法
    handleSizeChange (val) {
      this.pageSize = val
      // console.log(`每页 ${val} 条`)
      this.getMenuinfo()
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      // console.log(`当前页: ${val}`)
      this.getMenuinfo()
    },
    // 增加权限细则
    async addrole () {
      const menuId = []
      const multiple = this.multipleSelection
      for (var i = 0; i < multiple.length; i++) {
        menuId.push(multiple[i].menuId)
      }
      const info = {
        name: this.menufrom.name,
        rid: this.menufrom.rid,
        menuIdList: menuId
      }
      const res = await this.$http.put('role/update/add', info)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('添加成功！')
        this.getmenudetail()
      } else {
        this.$message.error(res.data.msg)
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      // console.log(this.multipleSelection)
    },
    // 移除权限细则
    async moveon () {
      const menuId = []
      const multiple = this.multipleSelection
      for (var i = 0; i < multiple.length; i++) {
        menuId.push(multiple[i].menuId)
      }
      const info = {
        name: this.menufrom.name,
        rid: this.menufrom.rid,
        menuIdList: menuId
      }
      const res = await this.$http.put('role/update/delete', info)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('移除成功！')
        this.getmenudetail()
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 切换组件
    unhavebtn () {
      this.nowhave = false
      this.unhave = true
    },
    nowhavebtn () {
      this.nowhave = true
      this.unhave = false
    }
  }
}
</script>

<style scoped lang="stylus">
.role,.card
  height 100%
  min-width: 1200px
  .headertext
    padding 40px 0 0 10px
    font-size 20px
    color #888
.text
  padding-top 20px
  .Conpager
    margin 0 auto
    padding-top 5px
  .stu-pager
    text-align center
.coll-div
  width 100%
  overflow auto
  margin 0 10px
.demo-drawer__footer
  text-align right
</style>
